<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>功能模块管理-列表</title>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/layer/layer.js"></script>
    <style>
        ul li {
            list-style: none;
            display: inline-block;
        }

        #page ul li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }


        table {
            width: 80%;
            margin: 0 auto;
        }

        th,
        td {
            border: 1px solid #FAEBD7;
            text-align: center;
        }

        tr:hover td {
            background-color: aliceblue;
            cursor: pointer;
        }

        #page {
            text-align: center;
        }

        #search {
            margin-left: 50px;
        }
        #new{
            margin-left: 50px;
        }
        #new input{
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: #4476A7;
            color: #F8F8F8;
            border: 1px solid #4476A7;
            border-radius: 5px;
        }
        #new input:hover{
            background-color:#F0F8FF;
            color: #4476A7;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="search">
    <form action="" method="post" id="form">
        <ul>
            <li><span>功能模块名称:</span><input type="text" id="name"/></li>
            <li><input type="button" id="searchBtn" value="搜索"/></li>
        </ul>
    </form>
</div>
<div id="new"><input type="button" value="新增" id="newBtn"/></div>
<div id="body">
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>模块名称</th>
            <th>模块url</th>
            <th>描述</th>
            <th>是否推送</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div id="page">
    <ul></ul>
</div>
</body>
<script>
    $(function () {
        $("#searchBtn").click(function () {
            search();
        });

        $("#newBtn").click(function () {
                window.location.href = "new.html"
        });
        toPage(1);
    })

    function search() {
        toPage(1);
    }

    function del() {
        // alert($(this).attr("data-id"));
        var id = $(this).attr("data-id");
        layer.confirm('是否要删除？', {
            btn: ['确定删除','再想想'] //按钮
        }, function(){
            //删除
            $.ajax({
                url: baseUrl+"module/del.json",
                contentType: "json",
                data: {
                    id: id
                },
                success: function (data) {
                    if (data.code == "200") {
                        layer.msg('已删除', {icon: 1});
                        toPage(1);
                    }else{
                        layer.msg('失败', {icon: 5});
                    }

                }
            });


        });

    }

    function ts(){
        var id = $(this).attr("data-id");
        var flag = $(this).attr("data-flag");

        $.ajax({
            url: baseUrl+"module/ts.json",
            contentType: "json",
            data: {
                id: id,
                flag:flag
            },
            success: function (data) {
                if (data.code == "200") {
                    layer.msg('已更改', {icon: 1});
                    toPage(1);
                }else{
                    layer.msg('失败', {icon: 5});
                }

            }
        });
    }

    function toPage(page) {

        $.ajax({
            url: baseUrl+"module/list.json",
            contentType: "json",
            data: {
                page: page
            },
            success: function (data) {
                if (data.code == "200") {
                    //1:创建表格
                    createTable(data.pageInfo.list);
                    //2:创建页码
                    createPageInfo(data.pageInfo);
                }

            }
        })
    }

    function createTable(result) {
        $("#body table tbody").empty();
        var tbody = $("#body table tbody");
        $.each(result, function (index, module) {
            var idTd = $("<td></td>").append(module.id);
            var nameA = $("<a></a>").append(module.name).attr("href","view.html?id="+module.id);
            var nameTd = $("<td></td>").append(nameA);
            var addressTd = $("<td></td>").append(module.url);
            var desTd = $("<td></td>").append(module.des);

            var tsTd= $("<td></td>") ;
            if(module.flag===1){
                tsTd = tsTd.append("已推送");
            }else{
                tsTd = tsTd.append("未推送");
            }

            var delBtn = $("<a></a>").attr("href", "#").attr("data-id", module.id).append("删除");
            delBtn.on("click", del);

            var tsBtn = $("<a></a>").attr("href", "#").attr("data-id", module.id).attr("data-flag", module.flag);
            if(module.flag===1){
                tsBtn =tsBtn.attr("data-flag",0).append("取消推送主页");
            }else{
                tsBtn =tsBtn.attr("data-flag",1).append("推送主页");
            }
            tsBtn.on("click", ts);

            var updateBtn = $("<a></a>").attr("href", "update.html?id=" + module.id).append("更新");

            var optTd = $("<td></td>").append(delBtn).append("&nbsp;&nbsp;").append(updateBtn).append("&nbsp;&nbsp;").append(tsBtn);
            $("<tr></tr>").append(idTd).append(nameTd).append(addressTd).append(desTd).append(tsTd).append(optTd).appendTo(tbody);
        });
    }
</script>
</html>